<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D环境及物体</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js"
            }
        }
    </script>
    <script type="module">
        //  
        import * as THREE from 'three';

        /**      一个3D 物体的形成需要
          *  1. 场景（Scene）承载物体的环境 const scene = new THREE.Scene()
          *  2. 相机（Camera）
          *  3. 渲染器（Renderer）
          * */


        /**
         *       场景中的物体（几何体）
         *  1. 长方体 - BoxGeometry
         *  2. 圆柱体 - CylinderGeometyr
         *  3. 球体 - SphereGeometry
         *  4. 圆锥 - ConeGeometry
         *  5. 矩形平面 - PlaneGeometry
         *  6. 原平面 - CircleGeometry
         *   https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry
        */

        /**
         *       几何体的外观（材质）
         *  1. 网格 - MeshBasicMaterial
         *  2. 网格漫反射 - MeshLambertMaterial （受光照影响）
         *  3. 网格高光 - MeshPhongMaterial  （受光照影响）
         *  4. 物理材质 - MeshStandardMaterial （受光照影响）
         *  5. 点材质 - MeshPhysicalMaterial (MeshPhysicalMateral) （受光照影响）
         *  6. 线基础材质 - LineBasicMaterial
         *  7. 精灵材质 - SpriteMaterial
         *   https://threejs.org/docs/index.html?q=Material#api/en/materials/MeshBasicMaterial
        */

        // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
        const width = 800; //宽度
        const height = 500; //高度

        // 1. 创建一个场景
        const scene = new THREE.Scene()

        // 创建一个三维的坐标轴（需要在物体显示之前设置 不然不显示 代码的执行顺序）
        const axesHelper = new THREE.AxesHelper(150);

        // 添加到三维场景中
        scene.add(axesHelper)

        // 2. 创建一个长方体  100 * 100 * 100
        const geometry = new THREE.BoxGeometry(100, 100, 100)

        // 3. 创建一个材质
        const material = new THREE.MeshBasicMaterial({
            color: 0x00ffff, //设置材质颜色
            transparent: true,//开启透明
            opacity: 0.5,//设置透明度
        })

        // 4. 网格模型 - 将形状（几何体）与材质 组合成一个物体
        const mesh = new THREE.Mesh(geometry, material)

        // 设置 网格模型（物体）的位置  默认 坐标原点
        mesh.position.set(0, 0, 0)

        // 5. 将创建好的物体添加到场景中
        scene.add(mesh)

        console.log(mesh)

        // 6. 创建一个 透视投影相机
        /**
         * 参数3 近截面距离相机的距离
         * 参数4 远截面距离相机的距离
        */
        const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000)

        // 7. 设置相机的位置
        camera.position.set(200, 300, 500)

        // 8. 设置相机的观察的中心点
        camera.lookAt(0, 0, 0)

        // 9. 创建一个渲染器 让物体呈现出来
        const renderer = new THREE.WebGLRenderer()

        // 10. 设置three.js渲染区域的尺寸(像素px)
        renderer.setSize(width, height);

        // 11. 执行渲染操作
        renderer.render(scene, camera);

        // 12. 将渲染物体添加到 指代功能的元素中
        document.body.appendChild(renderer.domElement);


        /** 思路总结
         * 1. 搭建3D 环境
         * 2. 通过几何体，材质API来构建一个物体
         * 3. 设置物体的位置 中心点在物体的中心
         * 4. 创景相机 设置相机的位置拍摄物体
         * 5. 创建渲染器 使相机拍摄的物体呈现出来
         * 重点：你所创建的任何以样东西都要通过 scene.add() 方法 添加到三维场景中
        */
    </script>
</body>

</html>